<template>
  <div class="container">
    <!-- fixed:使得van-nav-bar靠顶部固定定位 -->
    <van-nav-bar fixed title="搜索结果" left-arrow @click-left="$router.back()" />
    <!-- 搜索列表展示  瀑布流加载 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in searchList" :key="item.art_id.toString()" :title="item.title" />
    </van-list>
  </div>
</template>

<script>
// 导入获取文章搜索结果的api函数
import { apiSearchList } from '@/api/search.js'
export default {
  name: 'search-result',
  data () {
    return {
      // 瀑布相关
      // list: [],
      loading: false, // 瀑布流加载效果
      finished: false, // 是否加载完成

      page: 1, // 页码
      per_page: 10, // 每页的条数

      searchList: [] // 根据关键字获得到的文章列表信息
    }
  },
  // created () {
  //   this.getSearchList()
  // },
  methods: {
  //   // 1.获取搜索结果
  //   async getSearchList () {
  //     // 调用api
  //     const args = { q: this.$route.params.keyword }
  //     const result = await apiSearchList(args)
  //     // data接收
  //     this.searchList = result.results
  //   },

    // 2.瀑布加载
    async onLoad () {
      // 延迟执行，使得有加载效果
      await this.$sleep(1000)

      // 调用api,获得文章数据
      // args:参数设置
      const args = { q: this.$route.params.keyword, page: this.page }
      const result = await apiSearchList(args)

      // 加载完成，停止加载动画执行
      this.loading = false

      // 如果数据没有获取到
      if (!result.results.length) {
        // 表示数据已全部加载完成，停止瀑布
        this.finished = true
        return false // 停止后续代码执行
      }

      // 如果获取到了数据,data追加数据[{},{},{}...]
      this.searchList.push(...result.results) // 展开运算符
      // 增加分页
      this.page++

      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1)
      //   }

      //   // 加载状态结束
      //   this.loading = false

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true
      //   }
      // }, 1000)
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-sizing: border-box;
  .van-list {
    flex: 1;
    margin-top: 92px;
  }
}
</style>
